import axios from '../api'
import { colorArr1, colorArr2 } from '../config'
import { watch } from 'vue'
import { useStore } from 'vuex'
interface IContainer {
  value: HTMLElement
}
interface ICommon {
  [x: string]: any
}
type IIdata = {
  name: string,
  data: number[]
}
type commodity = {
  title: string
  base: number,
  data: IIdata[]
  unit: string
}
type Type = {
  key: string
  text: string
}
type Common = {
  month: string[]
}
interface IData {
  commodity: commodity
  map: commodity
  seller: commodity
  type: Type[]
  common: Common
}
declare const echarts: ICommon


export default function useTrend(container: IContainer, data: ICommon, selectType: ICommon, titleFontSize: ICommon) {
  let charts : any
  const store = useStore()

  watch(() => store.state.theme, theme => {
    charts.dispose()  // 销毁原来的图表
    initChart()
    screenAdapter()
    updateChart()
  })

  const initChart = () => {
    charts = echarts.init(container.value, store.state.theme)
    const initOption = {
      grid: {
        left: '3%',
        top: '35%',
        right: '3%',
        bottom: '1%',
        containLabel: true // 定位包括坐标轴的文字
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        left: 20,
        top: '15%',
        icon: 'circle'
      },
      xAxis: {
        boundaryGap: false,
        type: 'category'
      },
      yAxis: {
        type: 'value'
      },
    }
    charts.setOption(initOption)
  }

  const getData = res => {
    // const {data: res} = await axios.get('trend')
    data.value = res
    updateChart()
  }

  const updateChart = () => {
    
    // 类目轴的数据
    const timeData = data.value.common.month
    // y轴的数据  先取出一组数据
    const valueData = data.value[selectType.value].data
    const seriesData = valueData.map((item: { name: any; data: any }, index: number) => {
      return {
        name: item.name,
        type: 'line',
        data: item.data,
        stack: selectType.value,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,0,0,1,
            [
              {
                offset: 0,
                color: colorArr1[index] 
              },
              {
                offset: 1,
                color: colorArr2[index] 
              }
            ]
          )
        }
      }
    })
    // 图例数据
    const legendData = valueData.map((item: { name: any }) => item.name)
    const updateOption = {
      xAxis: {
        data: timeData
      },
      series: seriesData,
      legend: {
        data: legendData
      }

    }
    charts.setOption(updateOption)
  }

  const screenAdapter = () => {
    const fontSize = container.value.offsetWidth / 100 * 3.6
    titleFontSize.value =fontSize
    const adapterOption = {
      legend: {
        itemWidth: fontSize,
        itemHeight: fontSize,
        itemGap: fontSize,
        textStyle: {
          fontSize: fontSize / 2
        }
      }
    }
    charts.setOption(adapterOption)
    charts.resize()
  }


  return {
    initChart,
    getData,
    updateChart,
    screenAdapter,
    charts
  }
}
